<template>
    <div class="im-index">
        <!-- 表情包 -->
        <Picker :data="emojiIndex" class="test-picker"/>
		<!-- 页面标题 -->
		<div class="im-index-search">
            <ComSearchGroup @handleSearch="leftRef.searchKeys = $event" btnName="添加" @handleAdd="leftRef.handleAdd()" />
        </div>
        <!-- 聊天区 -->
        <div class="im-index-content area">
            <Left ref="leftRef" />
            <Right />
        </div>
    </div>
</template>
<script lang="ts" setup>
import data from 'emoji-mart-vue-fast/data/all.json'
import 'emoji-mart-vue-fast/css/emoji-mart.css'
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'
const emojiIndex = new EmojiIndex(data);
import Left from './components/Left.vue';
import Right from './components/Right.vue';
import mitt from "@/utils/bus";
const leftRef = ref(null);
onUnmounted(() => {
    mitt.all.clear();
})
</script>
<style lang="scss">
    .test-picker{
        position: absolute;
        opacity: 0;
        z-index: -100;
    }
</style>